<template>
  <el-container style="height: 100vh">
    <Aside/>
    <el-container>
      <el-main style="border-right: 1px solid transparent; border-image: linear-gradient(to bottom, #e0c3fc, #8ec5fc) 1 100%;">
        <!--主页面-->
        <h1 class="title" style="color: black">Some Information</h1>
        <div class="main-content">
          <div class="text-content">
            <div class="content">
              <h1>关于网站</h1>
              <br>
              <hr>
              <p>
                这是Victor用于生成知识图谱的实践站点，内含用户管理系统。
                <br>
                VC-kd 意为 Victor's knowledge domain generation site.
              </p>
              <hr>
              <p>所以什么是知识图谱呢？</p>
              <p>
                答：知识图谱（Knowledge Graph），在图书情报界称为知识域可视化或知识领域映射地图，
                是显示知识发展进程与结构关系的一系列各种不同的图形，用可视化技术描述知识资源及其载体，
                挖掘、分析、构建、绘制和显示知识及它们之间的相互联系。——百度百科
              </p>
            </div>
            <div class="content">
              <div class="text-content">
                <h1>关于作者：</h1>
                <br>
                <hr>
                <p>
                  <div class="content" style="background: whitesmoke; width: 80%" >
                    <h2>
                      Benaso
                    </h2>
                    <hr>
                    <br>
                    CSDN博客:
                    <el-link link href="https://blog.csdn.net/weixin_74783792"
                             style="font-size: 18px">click here</el-link>
                    <br>
                    <br>
                    Gitee:
                    <el-link link href="https://gitee.com/BBbenaso"
                             style="font-size: 18px">click here</el-link>
                    <br>
                    <br>
                    GitHub:
                    <el-link link href="https://github.com/Benaso"
                             style="font-size: 18px">click here</el-link>
                  </div>
                  <div class="content" style="background: whitesmoke; width: 60%" >
                    <p>
                      如需进行学术交流请加:
                      <hr>
                      <br>
                      QQ: 1924537948
                      <br>
                      <br>
                      抖音: 73849275276
                    </p>
                  </div>
                  <div class="content" style="background: whitesmoke; width: 40%" >
                    <p>
                      在我见识和经历了三观稀碎的人后，更加坚定了自己要走的路。
                      好巧不巧他们竟都是 “逐利者”，或者说是 golden digger，
                      对别人的定义从来都是别人对其是否存在利用价值。
                      于是，此后我在心中慢慢定义，绝对不能让这类人参与我余生的十之一，百之一。
                      我的人生很短，容不下垃圾。
                    </p>
                  </div>
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import Aside from '@/components/aside.vue';
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

html, body {
  height: 100%;
  margin: 0;
}

.main-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 20px; /* 添加内边距以避免靠得太紧 */
}

.right-container {
  flex: 1;
  margin-left: 20px; /* 确保间距一致 */
}

.text-content {
  flex: 1;
  color: black;
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  font-size: 18px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  margin: 20px;
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #8ec5fc, #e0c3fc);
}

.title {
  font-size: 50px;
  text-align: center;
  font-family: "Pacifico", cursive;
}

// 容器样式
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
}

.el-container {
  background: linear-gradient(to right, #e0c3fc, #8ec5fc);
  height: 100%;
}
</style>
